<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h2 id='tutorial/concepts/$fire.html'>$fire方法</h2>

<p>此方法是位于VM中，与$watch, $unwatch构成一套自定义事件系统，实现模块（VM）间的通信。</p>
<p>$fire可以传多个参数， 第一个参数为事件名，或者说是VM上已存在的属性名，当VM中对应的属性发生变化时，框架内部就调用$fire方法，
    依次传入属性名，当前属性值，过去属性值。
</p>
<p>在avalon1.32中，$fire进行增强，在属性名前添加了一些特殊标记, 它就能触发其他VM的$watch回调函数。</p>
<ul>
    <li>up!xxx, 向上冒泡(1.5移除)</li>
    <li>down!xxx, 向下捕获(1.5移除)</li>
    <li>all!xxx, 全局广播</li>
</ul>
<pre class="brush:html;gutter:false;toolbar:false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;by 司徒正美&lt;/title&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
        &lt;script src="avalon.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            avalon.define("ancestor", function(vm) {
                vm.aaa = '1111111111'
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("ancestor.aaa事件被触发了")
                })
                vm.click = function() {
                    avalon.log("向下广播")
                    vm.$fire("down!aaa", "capture")
                }
            })
            avalon.define("parent", function(vm) {
                vm.text = "222222222"
                vm.aaa = '3333333333'
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("parent.aaa事件被触发了")
                })
                vm.click = function() {
                    console.log("全局扩播")
                    vm.$fire("all!aaa", "broadcast")
                }
            })
            avalon.define("son", function(vm) {
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("son.aaa事件被触发了")
                })
                vm.click = function() {
                    console.log("向上冒泡")
                    vm.$fire("up!aaa", "bubble")
                }
            })
        &lt;/script&gt;
        &lt;style&gt;

        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body class="ms-controller"   ms-controller="ancestor"&gt;
        &lt;h3&gt;avalon vm.$fire的升级版 &lt;/h3&gt;
        &lt;button type="button" ms-click="click"&gt;
            capture
        &lt;/button&gt;
        &lt;div ms-controller="parent"&gt;
            &lt;button type="button" ms-click="click"&gt;broadcast&lt;/button&gt;
            &lt;div ms-controller="son"&gt;
                &lt;button type="button" ms-click="click"&gt;
                    bubble
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<script>
    avalon.define("c-ancestor", function(vm) {
        vm.aaa = '1111111111'
        vm.$watch("aaa", function(v) {
            avalon.log(v)
            avalon.log("ancestor.aaa事件被触发了")
        })
        vm.click = function() {
            avalon.log("向下广播")
            vm.$fire("down!aaa", "capture")
        }
    })
    avalon.define("c-parent", function(vm) {
        vm.text = "222222222"
        vm.aaa = '3333333333'
        vm.$watch("aaa", function(v) {
            avalon.log(v)
            avalon.log("parent.aaa事件被触发了")
        })
        vm.click = function() {
            console.log("全局扩播")
            vm.$fire("all!aaa", "broadcast")
        }
    })
    avalon.define("c-son", function(vm) {
        vm.$watch("aaa", function(v) {
            avalon.log(v)
            avalon.log("son.aaa事件被触发了")
        })
        vm.click = function() {
            console.log("向上冒泡")
            vm.$fire("up!aaa", "bubble")
        }
    })
</script>

<div class="ms-controller"   ms-controller="c-ancestor">
    <h3>avalon vm.$fire的升级版(请在控制台下查看效果) </h3>
    <button type="button" ms-click="click">capture</button>
    <div ms-controller="c-parent">
        <button type="button" ms-click="click">broadcast</button>
        <div ms-controller="c-son">
            <button type="button" ms-click="click">
                bubble
            </button>
        </div>
    </div>
</div>



</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

